<template>
  <div class="main-box">
    <div class="login__box">
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="登录">
          <div class="login_item">
            <a-form-model
              ref="loginForm"
              :model="loginForm"
              :rules="loginFormRules"
              v-bind="layout"
            >
              <a-form-model-item has-feedback label="用户名" prop="username">
                <a-input allowClear v-model.number="loginForm.username" />
              </a-form-model-item>
              <a-form-model-item has-feedback label="密码" prop="passworld">
                <a-input
                  allowClear
                  v-model="loginForm.passworld"
                  type="password"
                  autocomplete="off"
                />
              </a-form-model-item>
              <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="submitForm('loginForm')">
                  登录
                </a-button>
                <a-button
                  style="margin-left: 10px"
                  @click="resetForm('loginForm')"
                >
                  重置
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="注册" force-render>
          <div class="regist_item">
            <a-form-model
              ref="registForm"
              :model="registForm"
              :rules="registFormRules"
              v-bind="layout"
            >
              <a-form-model-item has-feedback label="用户名" prop="username">
                <a-input
                  allowClear
                  v-model.number="registForm.username"
                  allowClear
                />
              </a-form-model-item>
              <a-form-model-item has-feedback label="密码" prop="passworld">
                <a-input
                  allowClear
                  v-model="registForm.passworld"
                  type="password"
                  autocomplete="off"
                />
              </a-form-model-item>
              <a-form-model-item has-feedback label="确认密码" prop="checkPass">
                <a-input
                  allowClear
                  v-model="registForm.checkPass"
                  type="password"
                  autocomplete="off"
                />
              </a-form-model-item>
              <a-form-model-item has-feedback label="手机号" prop="phonenumber">
                <a-input allowClear v-model.number="registForm.phonenumber" />
              </a-form-model-item>
              <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="submitForm('registForm')">
                  登录
                </a-button>
                <a-button
                  style="margin-left: 10px"
                  @click="resetForm('registForm')"
                >
                  重置
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      isLogin: true,
      loginForm: {
        passworld: '',
        username: '',
      },
      registForm: {
        passworld: '',
        checkPass: '',
        phonenumber: '',
        username: '',
      },
      loginFormRules: {
        username: [
          { required: true, message: '请输入手机号', trigger: 'change' },
        ],
        passworld: [
          { required: true, message: '请输入密码', trigger: 'change' },
        ],
      },
      registFormRules: {
        username: [
          { required: true, message: '请输入手机号', trigger: 'change' },
        ],
        passworld: [
          { required: true, message: '请输入密码', trigger: 'change' },
        ],
        checkPass: [
          { required: true, message: '请重新输入密码', trigger: 'change' },
        ],
        phonenumber: [
          { required: true, message: '请输入手机号', trigger: 'change' },
        ],
      },
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
      },
    }
  },
  created() {},
  methods: {
    // 提交
    submitForm(formName) {
      // 提交之前进行校验
      this.$refs[formName].validate((vild) => {
        switch (formName) {
          case 'loginForm':
            this.login(this[formName])
            break
          case 'registFom':
            this.regist(this[formName])
            break
        }
      })
    },

    login(data) {
      this.$axios.post(`/login`, data).then((val) => {
        debugger
        console.log(data)
        if (val.data.code === 200) {
          this.$router.push('/home')
        }
      })
    },
    regist(data) {
      this.$axios.post(`/regist`, data).then((val) => {
        if (val.data.code === 200) {
          this.$router.push('/home')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    callback() {
      console.log('组件切换')
    },
    // 验证方法
  },
}
</script>

<style scoped lang="less">
.main-box {
  height: 100vh;
  background: url('../assets/img/bg.jpg') center;
  background-position: 100% 100%;
  position: relative;
  .login__box {
    background: #fff;
    border-radius: 5px;
    height: 400px;
    width: 400px;
    padding: 30px;
    position: absolute;
    right: 20%;
    top: 20%;
  }
}
</style>
